import React,{useEffect} from 'react'

import moment from 'moment'
import {Modal,Button, Checkbox,Select,Form, Input,DatePicker} from 'antd'

const { Option } = Select;
function My_modal({isModalVisible,handleOk,handleCancel,data,edit_value}) {

   
    const [form] = Form.useForm()
    
    useEffect(() => {
            console.log(form)
            console.log(edit_value)
        if(edit_value.key) {
            form.setFieldsValue({
               ...edit_value
            })
        }else {
            form.setFieldsValue({
                name:"",
                age:"",
                city:"",
                state:""
            })
        }
    },[edit_value])

    const onFinish = (values) => {
        values.title = edit_value.key ? '编辑' : '新增'
        values.key = data.length + 1

        if(edit_value.key) {
            values.title = '编辑'
            values.id = edit_value.id
        }else {
            values.title = '新增'
            values.id = new Date() * 1
        }
       
      
        values.date = moment(values.date).format("YYYY-MM-DD")
       
        console.log('Success:', values);
        handleOk(values)
      };
    
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };

    //   const onChange = (date, dateString) => {
    //     console.log(date, dateString);
    //   };
      


  return (
    <>
       
    <Modal title={edit_value.id ? "编辑 modal" : "新增 modal"} 
    footer={null} forceRender={true}
    visible={isModalVisible} onOk={handleOk} 
    onCancel={handleCancel}>
   
   
    
    <Form
      form = {form}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >

       <Form.Item
        label="Name"
        name="name"
        rules={[
          {
            required: true,
            message: 'Please input your name!',
          },
        ]}
      >
        <Input/>
      </Form.Item>

     

      <Form.Item
        label="State"
        name="state"
        rules={[
          {
            required: true,
            message: 'Please input your state!',
          },
        ]}
      >
        <Select>
            <Option value="异常">异常</Option>
            <Option value="已关闭">已关闭</Option>
            <Option value="运行中">运行中</Option>
            <Option value="已上线">已上线</Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="Age"
        name="age"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      {/* <Form.Item
        label="Date"
        name="date"
        rules={[
          {
            required: true,
            message: 'Please input your name!',
          },
        ]}
      >
          <DatePicker onChange={onChange} />
      </Form.Item> */}


      <Form.Item
        label="City"
        name="city"
        rules={[
          {
            required: true,
            message: 'Please input your city!',
          },
        ]}
      >
        <Input/>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
         <Button type="primary" onClick={handleCancel}>
         取消
        </Button>
        
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
       
      </Form.Item>
    </Form>
    </Modal>
  </>
  )
}

export default My_modal